<style lang="scss" scoped>
#myCustom {
    padding: 20px;
  .rare-list {
    height: auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    padding-bottom: 50px;
    box-shadow: 0 0 10px 0 #cfcfcf;
    .rare-list-header {
      .right {
        float: right;
        width: 59%;
      }
      .btn-left {
        margin-left: 10px;
      }
      .btn-right {
        margin-right: 10px;
      }
    }
    /*表格*/
    .rare-list-table {
      position: relative;
      margin-top: 20px;
      padding: 10px;
      min-height: 80px;
      _height: 80px;
      .disabled {
        color: #ccc;
      }
      .el-table {
        min-height: 450px;
      }
    }
    .fileClass {
      width: 22px;
      height: 26px;
      display: inline-block;
      position: relative;
      margin-right: 7px;
      margin-left: 7px;
      margin-top: 10px;
    }
    .posBg {
      position: absolute;
      right: -4px;
      bottom: -4px;
      display: inline-block;
      width: 13px;
      height: 13px;
    }
    /*分页*/
    .pageation {
      height: 32px;
      line-height: 32px;
      margin-top: 20px;
    }
    
  }
}
</style>



<template>
    <div id="myCustom">
        <!--表格区域-->
        <div class="rare-list">
            <!--头部创建按钮及搜索-->
            <div class="rare-list-header">
                <Dropdown >
                    <Button type="primary" class="btn-left" @click="addData">新建模板</Button>
                </Dropdown>
                <div style="float:right;width:350px;" class="btn-right">
                    <!-- <Select v-model="searchColumn" style="width:140px;" placeholder="请选择查询字段" @on-change="getSearchColumn">
                        <Option v-for="item in searchColumnList" :value="item.value" :key="item.value" style="text-align:center;letter-spacing:1px;">{{ item.label }}</Option>
                    </Select> -->
                    <Input style="width:140px;" placeholder="请按描述信息查询" readonly>

                    </Input>
                <Input placeholder="请输入" class="right" v-model="keyword">
                    <Button slot="append" icon="ios-search" @click='search' ></Button>
                </Input>
                </div>

            </div>
            <!--表格显示-->
            <div class="rare-list-table">
                <el-table v-if="!isWarn" v-loading="loading" element-loading-text="数据加载中，请稍后" :data="CustomList" border style="width:100%">
                    <el-table-column label="ID">
                        <template slot-scope="scope">
                            <a href="javascript:;" style="line-height:45px;">{{scope.row.id}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="描述">
                        <template slot-scope="scope">
                            <a href="javascript:;" style="line-height:45px;">{{scope.row.details}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间">
                        <template slot-scope="scope">
                            <a href="javascript:;" style="line-height:45px;">{{scope.row.createdata}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="编辑">
                        <template slot-scope="scope">
                            <Button type="primary" @click='editCustom(scope.row)'>编辑</Button>
                        </template>
                    </el-table-column>
                    <el-table-column label="删除">
                        <template slot-scope="scope">
                            <Button type="primary" @click="delectCustom(scope.row)">删除</Button>
                        </template>
                    </el-table-column>                  

                </el-table>

                <div v-if='emptyShow' class='empty'>
                    <img style="display:block;float:left;" src="/static/icon/add.png" />
                    <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
                </div>

                <warn v-if="isWarn" @callback="getCustomList"></warn>   
            </div>

            <div v-if="!isWarn" class="pageation">
                <el-pagination style="float:left;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
                <div style="font-size:13px;color:#606266;float:left;padding:1px 5px;"> 共 {{total}} 个模板</div>
            </div>






        </div>
        <!-- 保存模板信息弹框 -->
        <Modal
            v-model="modal1"
            title="编辑模板"
            @on-ok="ok"
            width='60%'
            @on-cancel="cancel">
            <div>
                <div style="min-height: 40px; width:45%;">
                    <el-form ref="form" :model="CustomName" label-width="200px" :label-position="labelPosition" size='mini'>
                        <el-form-item label="模板名称">
                            <el-input v-model="CustomName.name" ></el-input>
                        </el-form-item>
                    </el-form> 
                </div>
                <div style="min-height: 500px; ">
                    <div class="modalLeft" style="width:45%;float:left">
                        <el-form ref="form" :model="datas" label-width="200px" :label-position="labelPosition" size='mini'>   
                            <el-form-item label="LIBRARY_NAME">
                                <el-input v-model="datas.LIBRARY_NAME" ></el-input>
                            </el-form-item>  
                            <el-form-item label="PLATFORM">
                                <el-input v-model="datas.PLATFORM" ></el-input>
                            </el-form-item>
                            <el-form-item label="PLATFORM_MODEL">
                                <el-input v-model="datas.PLATFORM_MODEL" ></el-input>
                            </el-form-item>
                            <el-form-item label="PLATFORM_UNIT">
                                <el-input v-model="datas.PLATFORM_UNIT" ></el-input>
                            </el-form-item>
                            <el-form-item label="PROGRAM_GROUP">
                                <el-input v-model="datas.PROGRAM_GROUP" ></el-input>
                            </el-form-item>  
                            <el-form-item label="READ_GROUP_NAME">
                                <el-input v-model="datas.READ_GROUP_NAME" ></el-input>
                            </el-form-item>  
                            <el-form-item label="RUN_DATE">
                                <el-input v-model="datas.RUN_DATE" ></el-input>
                            </el-form-item>
                            <el-form-item label="SORT_ORDER">
                                <el-input v-model="datas.SORT_ORDER" ></el-input>
                            </el-form-item>
                            <el-form-item label="tumor_sample">
                                <el-input v-model="datas.tumor_sample" ></el-input>
                            </el-form-item>
                            <el-form-item label="af-of-alleles-not-in-resource">
                                <el-input v-model="datas.Af_of" ></el-input>
                            </el-form-item>                    

                        </el-form>  
                    </div>
                    <div class="modalRight" style="width:45%;float:left">
                        <el-form ref="form" :model="datas" label-width="200px" :label-position="labelPosition" size='mini'>   
                            <el-form-item label="intervals">
                                <el-input v-model="datas.intervals" ></el-input>
                            </el-form-item>  
                            <el-form-item label="min-base-quality-score">
                                <el-input v-model="datas.min_base" ></el-input>
                            </el-form-item>
                            <el-form-item label="select-type-to-include">
                                <el-input v-model="datas.selectTypeToInclude" ></el-input>
                            </el-form-item>
                            <el-form-item label="normal-sample">
                                <el-input v-model="datas.normalSample" ></el-input>
                            </el-form-item>
                            <el-form-item label="output-mode">
                                <el-input v-model="datas.outputMode" ></el-input>
                            </el-form-item>  
                            <el-form-item label="disable-read-filter">
                                <el-input v-model="datas.disableReadFilter" ></el-input>
                            </el-form-item>  
                            <el-form-item label="variant">
                                <el-input v-model="datas.variant" ></el-input>
                            </el-form-item>
                            <el-form-item label="reference">
                                <el-input v-model="datas.reference" ></el-input>
                            </el-form-item>
                            <el-form-item label="filterName">
                                <el-input v-model="datas.filterName" ></el-input>
                            </el-form-item>
                            <el-form-item label="filterExpression">
                                <el-input v-model="datas.filterExpression" ></el-input>
                            </el-form-item>                    

                        </el-form>  
                    </div>
                </div>
            </div> 
        </Modal>

        <!-- 新建模板弹框 -->

        <Modal
            v-model="modal2"
            title="新建模板"
            @on-ok="modal2Ok"
            @on-cancel="modal2Cancel">
            <div style="min-height: 50px;margin-bottom:10px">
                <div class="modalLeft">
                    <div style="margin-top:20px;">
                        <el-form ref="form" :model="CustomName" label-width="120px" :label-position="labelPosition" size='mini'>   
                            <el-form-item label="模板名称">
                                <el-input v-model="CustomName.name" ></el-input>
                            </el-form-item>                    

                        </el-form>  
                    </div>
                </div>
            </div>

        </Modal>


    </div>
</template>

<script>
import {data} from "api/index.js";
import warn from "@/components/warn.vue";
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';
export default {
  name: "myCustom",
  data() {
    return {
      isWarn: false,
      emptyShow: false,
      CustomName:{
        name:''
      },
      sampleCount: 0, //样本总数
      total: 0,       //数据总数
      currentPage: 1,  //当前页数
      pageSize: 5,    //每页多少条
      keyword: "",
      modal1:false,
      modal2:false,
      currentCustom:{},
      loading:false,
      datas:{
        LIBRARY_NAME:'',
        PLATFORM:'',
        PLATFORM_MODEL:'',
        PLATFORM_UNIT:'',
        PROGRAM_GROUP:'',
        READ_GROUP_NAME:'',
        RUN_DATE:'',
        SORT_ORDER:'',
        tumor_sample:'',
        Af_of:'',
        intervals:'',
        min_base:'',
        normalSample:'',
        outputMode:'',
        disableReadFilter:'',
        variant:'',
        reference:'',
        filterName:'',
        filterExpression:'',
        selectTypeToInclude:''
      },
      CustomList: []
    };
  },
  components: {
        warn
    },
  methods: {
    //获取数据
    getCustomList() {
        var searchParam = ''
        if(this.keyword){
            searchParam = this.keyword
        }
        let obj = {
            param:searchParam,
            userId: getCookie("userid"),
            pageSize:this.pageSize,
            pageIndex:this.currentPage,
            productId:this.$store.state.productId
        }
        this.loading = true;
        data.getCustomList(obj).then((res) => {
            if(res.data){
                this.isWarn = false;
                console.log(res.data)
                this.total = res.data.count
                this.CustomList = res.data.templates
                this.loading = false
            }  
        })
        .catch(error => {
            this.isWarn = true;
            this.loading = false;
        })
    },
    //新建数据
    addData(name) {
        this.CustomName.name = ''
        this.modal2 = true;
    },
    //删除模板
    delectCustom(row) {
        this.currentCustom = row
        var _this = this;
        this.$confirm('该条数据将被删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.deleteCustom();
        })
    },
    //打开编辑模板
    editCustom(row) {
        console.log(row)
        this.currentCustom = row
        this.CustomName.name = row.details
        let obj = {
            productId:this.currentCustom.productId,
            userId: this.currentCustom.userId,
            templateId:this.currentCustom.templateId,
        }
        data.querydescribeCustomList(obj).then((res) => {
            console.log(res)
            if(res.data){
                this.datas = res.data.template
            }else{
                this.datas = {
                    LIBRARY_NAME:'',
                    PLATFORM:'',
                    PLATFORM_MODEL:'',
                    PLATFORM_UNIT:'',
                    PROGRAM_GROUP:'',
                    READ_GROUP_NAME:'',
                    RUN_DATE:'',
                    SORT_ORDER:'',
                    tumor_sample:'',
                    Af_of:'',
                    intervals:'',
                    min_base:'',
                    normalSample:'',
                    outputMode:'',
                    disableReadFilter:'',
                    variant:'',
                    reference:'',
                    filterName:'',
                    filterExpression:'',
                    selectTypeToInclude:''
                }
            }
        })
        this.modal1 = true

    },
    //查询模板
    search() {
        this.getCustomList();
    },
    handleSizeChange(size) {
        this.pageSize = size;
        this.getCustomList() 
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getCustomList();
    },
    //保存编辑模板信息
    ok() {
        let obj = {
            productId:this.currentCustom.productId,
            userId: this.currentCustom.userId,
            templateId:this.currentCustom.templateId,
            template:JSON.parse(JSON.stringify(this.datas))
        }
        data.describeCustomList(obj).then((res) => {
           if(res.msg == '成功'){
               this.$Message.success('编辑修改成功')
           }
        })
        let obj2 = {
            details:this.CustomName.name,
            productId:this.currentCustom.productId,
            userId: this.currentCustom.userId,
            templateId:this.currentCustom.templateId,
        }
        console.log(obj2)
        data.describeUpdateCustomList(obj2).then((res) => {
            console.log(res)
            if(res.msg == '成功'){
               this.$Message.success('模板名称修改成功')
               this.getCustomList()
           }
        })

    },
    cancel() {
        console.log(2)
    },
    //新建模板
    modal2Ok() {
        let obj = {
            userId: getCookie("userid"),
            type:'',
            productId:this.$store.state.productId,
            details:this.CustomName.name
        }
        if(this.CustomName.name){
            data.saveCustomList(obj).then((res) => {
                if(res){
                    this.getCustomList()
                }
            })
        }else{
            this.$Message.error('请输入模板名称')
        }
        
    },
    modal2Cancel() {

    },
    deleteCustom() {
        let obj = {
            productId:this.currentCustom.productId,
            userId:this.currentCustom.userId,
            templateId:this.currentCustom.templateId
        }
        data.deleteCustomList(obj).then((res) => {
            if(res){
                this.getCustomList()
            }
        })
    },
  },
  created() {
    this.getCustomList()  
  }
};
</script>


